<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${projectname }</title>
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../layui.js"></script>
</head>
<body>
    
    
<form class="layui-form" action="#" method="post" >

	<input name="head_icon" lay-verify="icon" type="hidden">
	
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
	<div class="layui-input-block">
	<div class="layui-upload">
	  <button type="button" class="layui-btn" id="icon"><i class="layui-icon"></i>上传图片</button>
	  <div class="layui-upload-list">
	    <img class="layui-upload-img" id="icon_img">
	    <p id="error_txt"></p>
	  </div>
	</div>   
 

        
    </div>

</div>

    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="userName" lay-verify="username" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    
    
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="name"  placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>
    
  
    
      <div class="layui-inline">
        <label class="layui-form-label">搜索选择框</label>
        <div class="layui-input-block">
          <select name="rid" lay-verify="required" lay-search="">
            <option value="">直接选择或搜索选择</option>
            
          </select>
        </div>
      </div>
    </div>
    
    
  
   
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="gender" value="男" title="男" checked="">
        <input type="radio" name="gender" value="女" title="女">
        
      </div>
    </div>
   
    
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" style="display: none;" lay-submit lay-filter="user_form">立即提交</button>
      </div>
    </div>
    
  </form>
 
  
  <script>
  
  layui.use(['form',"upload"], function(){
	var form = layui.form;
	var $ = layui.jquery
	  ,upload = layui.upload;
	
	 $.post("../RoleServlet?method=all",function(data){
     	var select_html = '';
     	for(let role of data){
     		
     		select_html+='<option value="'+role.id+'">'+role.rname+'</option>';
     	}
     	$("[name=rid]").append(select_html);
     	form.render('select'); //刷新select选择框渲染
     },"json");
	
	 //只要单击lay-submit标识的按钮,将触发表单的提交事件
	 form.on("submit(user_form)",function(data){
		 console.log(data);
		 var index = parent.layer.load(1);
		 $.post("../UsersServlet",{
			 method:"save",
			 rid:data.field.rid,
			 name:data.field.name,
			 gender:data.field.gender,
			 password:data.field.password,
			 userName:data.field.userName,
			 head_icon:data.field.head_icon
			 },function(data){
			 if(data == "ok"){
				 parent.layer.msg("添加成功!");
			 }else{
				 parent.layer.msg("添加失败!");
			 }
			 parent.layer.closeAll();
		 })
		 
		 return false;
	 })
	 
	 
	form.verify({
		username: function(value,item){
			if(/^\w{3,6}$/.test(value)){
				var msg = "";
				$.ajax({
					url: '../UsersServlet',
					type:'post',
					async:false,
					data :{method:'getName',name:value},
					success :function(data){
						msg = data;
					}
				})
				if(msg == "no"){
					return "用户名已存在!!";
				}
				
			}else{
				return "用户名必须3~6位!";
			}
			
			
		},
	icon:function(value,item){
		if(value.length==0){
			return "请选择头像!";
		}
	}
	
		
	});
	  //普通图片上传
	  var uploadInst = upload.render({
	    elem: '#icon'
	    ,url: '../IconFileUpload'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#icon_img').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(res.code > 0){
	        return layer.msg('上传失败');
	      }else{
	    	  layer.msg("头像上传成功");
	    	  $("[name=head_icon]").val(res.fileName);
	      }
	      //上传成功
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#error_txt');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	
  })

  
  
  function test(){
	  alert("123456");
  }
  
  
  </script>



</body>
</html>
